// 采购详情
import React from 'react'
import './buyDetail.scss'
import cookie from 'react-cookies'
import {
    Button,
    Table,
    Row,
    Col,
    Modal,
    Input, 
    message,
	Pagination,
    Form,
    Upload,
    Radio,
    DatePicker,
    Tooltip
     } from 'antd';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb'
import {EditTwoTone,ArrowDownOutlined,UploadOutlined} from '@ant-design/icons';
import {eqBuyInfoDetail,setInvoiceState} from '../../../api/deviceLibrary'
import { getAttach} from '../../../api/extra'

class buyDetail extends React.Component{
    formInvoicing=React.createRef()
    constructor(props){
        super(props)
        this.state = {
            invoicingModal:false,
            data_info:{},
            eq_list:[],
            InvoicingVal:false, // 开票状态
            fileList: [],
            contract_url:'',
            attach_id:'',// 上传合同返回的字段
            defaultFileList:[],
            invoice_time:''
        }
    }

    componentWillMount(){
        this.columns = [  
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
                align: 'center',
                render: (text,record,index) => `${index+1}`,
            },
            {
                title: '设备名称',
                dataIndex: 'eq_name',
                key: 'eq_name',
            },
            {
                title: '设备型号',
                dataIndex: 'eq_model',
                key: 'eq_model',
            },
            {
                title: '数量',
                dataIndex: 'buy_count',
                key: 'buy_count',
            },
            {
                title: '规格',
                dataIndex: 'spec_value',
                key: 'spec_value',
            },
			{
                title: '采购价格',
                dataIndex: 'buy_price_one',
                key: 'buy_price_one',
            },
          ];
    }

    componentDidMount(){
        this.getData()
    }

    getData=()=>{
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'id':this.props.location.state.id
        }
        
        eqBuyInfoDetail(post_data).then(res=>{
            this.setState({
                data_info:res.data,
                eq_list: res.data.eq_list,
                contract_url:res.data.contract_url
            })
        })
    }
    // 拒绝
    fmspIsNo=()=>{
        this.setState({invoicingModal:true})
    }
    fmsphandleCancelConfirm=()=>{
        this.setState({invoicingModal:false})
        this.formInvoicing.current.resetFields()
    }
    // 提交
    fmsphandleOkConfirm=(e)=>{
        let {InvoicingVal,attach_id,invoice_time}=this.state
        if(!InvoicingVal) return message.error('请勾选开票状态')
        if(!invoice_time) return message.error('请选择开票时间')
        if(!attach_id) return message.error('请上传合同')
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'id':this.props.location.state.id,
            invoice_time,
            'invoice_attach':attach_id
        }
        post_data.id = this.props.location.state.id
        setInvoiceState(post_data).then(res=>{
            if(res.code == 0) {
                message.success('提交成功')
                this.getData()
                this.setState({invoicingModal:false})
            } else {
                message.error('提交失败')
            }
        })
    }

    // 上传
    getUpLoadUrl = () => {
        let {attach_id,fileList,defaultFileList} = this.state
        const UpImgUrl = JSON.parse(sessionStorage.getItem('urlConfig')).attach.upload_url;
        const _this = this;
        const props = {
            showUploadList: true,
            defaultFileList,
            customRequest(option) {
                const post_data = {
                    upUrl: UpImgUrl,
                    file: option.file,
                    file_type:2
                }
                getAttach(post_data).then(res => {
                    if(res.code == 0) {
                        message.success('上传文件成功')
                        _this.setState({attach_id:res.data.attach_id})
                    } else {
                        message.error('上传文件失败')
                    }
                })
            },
            beforeUpload: file => {
                return new Promise((resolve, reject) => {
                    let fileName = file.name;
                    //截取文件名
                    let pointPos = fileName.indexOf('.');
                    fileName = fileName.substr(pointPos+1);
                    //判断文件是否符合正则表达式的规则
                    if (fileName.indexOf('pdf') == -1) {
                        message.error('上传类型必须为PDF文件')
                        return reject(false)
                     }
                    return resolve(true);
                  })
              },
            onChange({ fileList }) {
                _this.setState({ fileList, })
                let file = fileList[0]
                if(file) {
                    file.status = 'done'
                }
            },
            onRemove() {
                _this.setState({
                    fileList: []
                })
            }
        }
        return props;
    }
    // 变更状态
    changeInvoicing=()=>{
        this.setState({invoicingModal:true})
    }

    // 开票
    Invoicing=(val)=>{
        this.setState({
            InvoicingVal:val.target.checked
        })
    }
    // 下载合同
    downContract=()=>{
        window.open(this.state.contract_url)
    }
    onChangeTime = (value, dateString) => {
        this.setState({
            invoice_time: dateString,
        })
    }
    render(){
        const {invoicingModal,eq_list,data_info,InvoicingVal, fileList,showUploadList} = this.state
        return (
            <div id="ContentMainList" className="buyDetail">
                <Row>
                    <Col span={24}>
                        <BreadcrumbNav />
                    </Col>
                    <Col span={24}>
                        <div className="tipss">
                            <span className="blue"></span>
                            <span>采购详情</span>
                        </div>
                        <div className="ywDetail_bottom">
                            <div className="bto1">
                                <div className="bto1_1">
                                    <span>合同名称: {data_info.contract_name} </span>
                                    <Tooltip  title="下载合同">
                                                <ArrowDownOutlined style={{marginLeft:12, color:'skyblue'}} onClick={this.downContract} />
                                    </Tooltip> 
                                </div>
                                <div className="bto1_1">
                                    <span>合同时间: {data_info.contract_time} </span>
                                </div>
                                <div className="bto1_1">
                                    <span>合同金额: {data_info.contract_amount} </span>
                                </div>
                                <div className="bto1_1">
                                    <span>开票状态: {data_info.invoice_state == 0 ? '未开票': '已开票' } </span>  {data_info.invoice_state != 1 ? <a style={{marginLeft:12}} onClick={this.changeInvoicing}> <span>变更</span>  <EditTwoTone style={{marginLeft:6}}/></a> : '' }   
                                </div>
                                <div className="bto1_1">
                                    <span>开票类型: {data_info.invoice_type == 1 ? '增值税': (data_info.invoice_type == 2 ? '普通': (data_info.invoice_type == 3 ? '专业' : '不开票'))} </span>
                                </div>
                                <div className="bto1_1">
                                    <span>采买人: {data_info.buy_u_name} </span>
                                </div>
                            </div>
                            
                        </div>
                    </Col>          
                </Row>
                 {/* 采购清单 */}
                <Row className="spHistory">
                    <Col span={24}>
                            <div className="bto1_1"><span>采买清单: </span></div>
                            <div className="un_tableinfo">
                                    <Table
                                        columns={this.columns}
                                        dataSource={eq_list}
                                        pagination={false}
                                    />	 
                            </div>
                            <Button type="primary" onClick={()=>{this.props.history.go(-1)}} style={{height:36,width:80,textAlign:'center',color:'#ffffff',float:'right', marginRight:50}}>返 回</Button>
                    </Col>
                </Row>
                {/* 开票状态 */}
                <Modal 
                    title="开票状态变更" 
                    wrapClassName="invoicingModal"
                    visible={invoicingModal}
                    closable={false}
                    footer={[
                        <Button style={{backgroundColor:'#334BFC'}} key="submit" type="primary" onClick={this.fmsphandleOkConfirm.bind(this)}>
                            提交
                        </Button>,
                        <Button key="back" onClick={this.fmsphandleCancelConfirm}>
                            返回
                        </Button>,
                      ]}
                    >
                     <Form
                          ref={this.formInvoicing}
                          >
                            <Form.Item name="radio-group" label="开票状态">
                                <Radio value={InvoicingVal} onChange={this.Invoicing}>开票</Radio>
                            </Form.Item>

                            <Form.Item name="invoice_time" label="开票时间"  >
                                <DatePicker   format="YYYY-MM-DD" style={{width:200}} onChange={this.onChangeTime.bind(this)}  />
                            </Form.Item>
                    </Form>
                    <div style={{marginBottom:20}}>
                        <span>附件上传: </span>
                        <Upload
                            {...this.getUpLoadUrl()}
                            showUploadList
                            fileList={fileList}
                            progress={false}
                            >
                                {fileList.length == 0 ? <Button style={{padding:'10px 24px 28px 24px',borderRadius:'6px', marginLeft:6}} icon={<UploadOutlined />} >添加附件</Button> : ''}       
                        </Upload>
                    </div>
                     
                </Modal>
            </div>
        )
    }
}

export default buyDetail